import 'package:flutter/material.dart';

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '标签云示例:',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              _buildTagCloud(),

              SizedBox(height: 30),

              Text(
                '颜色选择器示例:',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              _buildColorPicker(),

              SizedBox(height: 30),

              Text(
                '头像列表示例:',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              _buildAvatarList(),
            ],
          ),
        ),
      ),
    );
  }

  // 标签云示例
  Widget _buildTagCloud() {
    List<String> tags = [
      'Flutter',
      'Dart',
      'Android',
      'iOS',
      'Web',
      'Desktop',
      'Mobile',
      'UI',
      'UX',
      'Design',
      'Development',
      'Programming',
      'Open Source',
      'Google',
      'Framework',
      'Widget',
    ];


    return Wrap(
      spacing: 8.0, // 主轴间距
      runSpacing: 4.0, // 交叉轴间距
      children: tags.map((tag) => _buildTagItem(tag)).toList(),
    );
  }

  Widget _buildTagItem(String tag) {
    return Chip(
      label: Text(tag),
      backgroundColor: Colors.blue.withOpacity(0.2),
      onDeleted: () {
        print('删除标签: $tag');
      },
    );
  }

  // 颜色选择器示例
  Widget _buildColorPicker() {
    List<Color> colors = [
      Colors.red,
      Colors.blue,
      Colors.green,
      Colors.yellow,
      Colors.purple,
      Colors.orange,
      Colors.pink,
      Colors.teal,
      Colors.cyan,
      Colors.lime,
      Colors.indigo,
      Colors.amber,
      Colors.brown,
      Colors.grey,
      Colors.black,
      Colors.white,
    ];

    return Wrap(
      spacing: 10.0,
      runSpacing: 10.0,
      children: colors.map((color) => _buildColorItem(color)).toList(),
    );
  }

  Widget _buildColorItem(Color color) {
    return GestureDetector(
      onTap: () {
        print('选择了颜色: $color');
      },
      child: Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(
          color: color,
          shape: BoxShape.circle,
          border: color == Colors.white
              ? Border.all(color: Colors.grey, width: 1)
              : null,
        ),
      ),
    );
  }

  // 头像列表示例
  Widget _buildAvatarList() {
    List<String> names = [
      '张三',
      '李四',
      '王五',
      '赵六',
      '钱七',
      '孙八',
      '周九',
      '吴十',
      '郑一',
      '王二',
      '冯三',
      '陈四',
    ];

    return Wrap(
      spacing: 12.0,
      runSpacing: 8.0,
      alignment: WrapAlignment.start,
      children: names.map((name) => _buildAvatarItem(name)).toList(),
    );
  }

  Widget _buildAvatarItem(String name) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        CircleAvatar(
          radius: 25,
          backgroundColor: Colors.blue,
          child: Text(
            name.substring(0, 1),
            style: TextStyle(color: Colors.white),
          ),
        ),
        SizedBox(height: 4),
        Text(name, style: TextStyle(fontSize: 12)),
      ],
    );
  }
}

// 在 main.dart 中使用
void main() {
  runApp(MaterialApp(home: WrapDemo()));
}
